<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<script src="https://cdn.tailwindcss.com"></script>
	    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
	    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
	    <!-- 配置Tailwind自定义主题 -->
	    <script>
	        tailwind.config = {
	            theme: {
	                extend: {
	                    colors: {
	                        primary: '#3B82F6',
	                        secondary: '#6366F1',
	                    },
	                    fontFamily: {
	                        inter: ['Inter', 'system-ui', 'sans-serif'],
	                    },
	                }
	            }
	        }
	    </script>
	    
	    <!-- 自定义工具类 -->
	    <style type="text/tailwindcss">
	        @layer utilities {
	            .carousel-item {
	                @apply absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out;
	            }
	            .carousel-item.active {
	                @apply opacity-100 z-10;
	            }
	            .carousel-indicator {
	                @apply w-3 h-3 rounded-full bg-white/50 cursor-pointer transition-all duration-300;
	            }
	            .carousel-indicator.active {
	                @apply bg-white w-8;
	            }
	        }
	    </style>
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    </style>
	<style>
	/* 图表区域样式 */
	    .chart-container {
	        background-color: #fff;
	        border-radius: 6px;
	        padding: 20px;
	        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	        margin-bottom: 20px;
	        height: 400px;
	    }
	    
	    .chart-title {
	        font-size: 16px;
	        font-weight: bold;
	        margin-bottom: 15px;
	        padding-left: 10px;
	        border-left: 4px solid #1E9FFF;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	    }
	    
	    .chart-filter {
	        font-size: 13px;
	        color: #666;
	    }
	    
	    .chart-filter select {
	        padding: 3px 8px;
	        border-radius: 3px;
	        border: 1px solid #ddd;
	        margin-left: 5px;
	    }
	    
	    .chart-content {
	        height: calc(100% - 30px);
	        width: 100%;
	    }
	    
	    /* 响应式调整 */
	    @media screen and (max-width: 768px) {
	        .carousel-content {
	            max-width: 100%;
	        }
	        
	        .stats-value {
	            font-size: 24px;
	        }
	        
	        .chart-container {
	            height: 300px;
	        }
	    }
	    
	    /* 内容区域优化 */
	    .layui-body {
	        padding: 15px;
	        background-color: #f6f8fa;
	    }
	    
	    /* 卡片标题统一样式 */
	    .card-title {
	        font-size: 16px;
	        font-weight: bold;
	        margin-bottom: 20px;
	        padding-left: 10px;
	        border-left: 4px solid #1E9FFF;
	    }
	
	    /* 加载提示样式 */
	    #menuLoading {
	        text-align: center;
	        padding: 20px;
	        color: #666;
	    }
		/* 数据统计区域优化 */
		.research-stats {
		    margin-top: 20px;
		    margin-bottom: 25px;
		}
		
		.research-stats .layui-col-xs6 {
		    margin-bottom: 20px;
		}
		
		.stats-card {
		    background-color: #fff;
		    border-radius: 6px;
		    padding: 20px;
		    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		    text-align: center;
		    transition: all 0.3s ease;
		    border-left: 4px solid #1E9FFF;
		    height: 100%;
		}
		
		.stats-card:hover {
		    transform: translateY(-5px);
		    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
		}
		
		.stats-icon {
		    font-size: 28px;
		    margin-bottom: 10px;
		    color: #1E9FFF;
		}
		
		.stats-value {
		    font-size: 28px;
		    font-weight: bold;
		    color: #1E9FFF;
		    margin: 10px 0;
		    font-family: Arial;
		}
		
		.stats-title {
		    color: #666;
		    font-size: 14px;
		    margin-bottom: 8px;
		}
		
		.stats-growth {
		    font-size: 13px;
		    color: #52c41a;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		
		.stats-growth i {
		    margin-right: 3px;
		}
		/* 最新动态区域优化 */
		.research-news {
		    background-color: #fff;
		    border-radius: 6px;
		    padding: 20px;
		    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		    margin-top: 20px;
		    height: 100%;
		}
		
		.news-title {
		    border-bottom: 1px solid #eee;
		    padding-bottom: 15px;
		    margin-bottom: 20px;
		    font-size: 17px;
		    font-weight: bold;
		    color: #333;
		    display: flex;
		    align-items: center;
		}
		
		.news-title i {
		    margin-right: 8px;
		    color: #1E9FFF;
		}
		
		.layui-timeline-item {
		    padding-bottom: 20px;
		}
		
		.layui-timeline-title {
		    font-size: 15px;
		    margin-bottom: 5px;
		    font-weight: 600;
		}
		
		.layui-timeline-content p {
		    color: #666;
		    line-height: 1.6;
		    margin-top: 5px;
		}
	</style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
		
			    <div class="relative w-screen">
			        <!-- 轮播图容器 -->
			        <div class="relative rounded-2xl overflow-hidden shadow-2xl group">
			            <!-- 轮播图项 -->
			            <div class="carousel-container relative h-[500px] md:h-[600px]">
			               
							
							<!-- 轮播项1 -->
			                <div class="carousel-item active">
			                    <img src="../images/science2.png" alt="北航能源与动力工程学院漆明净、闫晓军等相关成果" class="w-full h-full object-cover">
			                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6 md:p-10">
			                        <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 transform translate-y-0 opacity-100 transition-all duration-700">Sunlight-powered sustained flight of an ultralight micro aerial vehicle</h2>
			                        <p class="text-white/90 max-w-lg mb-4 transform translate-y-0 opacity-100 transition-all duration-700 delay-100">最新研究成果，北航研制新原理发动机自然光即可实现持续飞行的静电飞行器，北航能源与动力工程学院漆明净、闫晓军等相关成果以Article形式在线发表于《Nature》杂志，并同时获Nature和Science首页推荐。</p>
			                       <a href="https://sepe.buaa.edu.cn/info/1056/7424.htm" target="_blank">
			                                   <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg inline-flex items-center w-fit transform translate-y-0 opacity-100 transition-all duration-700 delay-200">
			                                       了解更多 <i class="fa fa-arrow-right ml-2"></i>
			                                   </button>
			                               </a>
			                           </div>
			                       </div>
								   
							<!-- 轮播项2 -->
							<div class="carousel-item">
							    <img src="../images/science5.png" alt="Sunlight-powered sustained flight of an ultralight micro aerial vehicle" class="w-full h-full object-cover">
							    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6 md:p-10">
							        <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 transform translate-y-4 opacity-0 transition-all duration-700">复旦20项获奖，自然科学奖一等奖数量全市第一！</h2>
							        <p class="text-white/90 max-w-lg mb-4 transform translate-y-4 opacity-0 transition-all duration-700 delay-100">2024年度上海市科学技术奖评选结果新鲜出炉！本年度我校再创佳绩，获奖项目共计20项，其中一等奖10项，二等奖10项。获自然科学奖一等奖7项，全市第一。20位第一完成人中50岁及以下中青年科学家共13位，年龄最小的32岁。</p>
							        <a href="https://mp.weixin.qq.com/s/w6icLCuvB8SVYYz3MU_0iQ" target="_blank">
							                    <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg inline-flex items-center w-fit transform translate-y-0 opacity-100 transition-all duration-700 delay-200">
							                        了解更多 <i class="fa fa-arrow-right ml-2"></i>
							                    </button>
							                </a>
							            </div>
							        </div>
			                
			                
			                <!-- 轮播项3 -->
			                <div class="carousel-item">
			                    <img src="../images/science3.png" alt="AI科技" class="w-full h-full object-cover">
			                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6 md:p-10">
			                        <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 transform translate-y-4 opacity-0 transition-all duration-700">AI tool detects LLM-generated text in research papers and peer reviews</h2>
			                        <p class="text-white/90 max-w-lg mb-4 transform translate-y-4 opacity-0 transition-all duration-700 delay-100">An analysis of tens of thousands of research-paper submissions has shown a dramatic increase in the presence of text generated using artificial intelligence (AI) in the past few years, an academic publisher has found.</p>
			                        <a href="https://www.nature.com/articles/d41586-025-02936-6" target="_blank">
									<button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg inline-flex items-center w-fit transform translate-y-4 opacity-0 transition-all duration-700 delay-200">
			                         进入详情页面 <i class="fa fa-leaf ml-2"></i>
			                        </button>
									</a>
			                    </div>
			                </div>
			                
			                <!-- 轮播项4 -->
			                <div class="carousel-item">
			                    <img src="../images/science4.png" alt=" MOEMS位移传感技术分类" class="w-full h-full object-cover">
			                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6 md:p-10">
			                        <h2 class="text-white text-2xl md:text-4xl font-bold mb-2 transform translate-y-4 opacity-0 transition-all duration-700">Micromachines 中北大学辛晨光副教授团队——微光机电高精密位移传感技术</h2>
			                        <p class="text-white/90 max-w-lg mb-4 transform translate-y-4 opacity-0 transition-all duration-700 delay-100">高精度位移传感作为一种基础的几何测量手段，可以用于位置、长度、加速度、角速度、振动等多种物理量的精密测量，在机械加工、半导体制造等工业生产领域及光力测量、光声光谱等科学研究领域均具有重要意义。。</p>
			                        <a href="https://blog.sciencenet.cn/blog-3516770-1455257.html" target="_blank">	
									<button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg inline-flex items-center w-fit transform translate-y-4 opacity-0 transition-all duration-700 delay-200">
			                        阅读原论文 <i class="fa fa-map-marker ml-2"></i>
			                        </button>
									</a>
			                    </div>
			                </div>
			            </div>
			            
			            <!-- 前后按钮 -->
			            <button class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" id="prevBtn">
			                <i class="fa fa-angle-left text-2xl"></i>
			            </button>
			            <button class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" id="nextBtn">
			                <i class="fa fa-angle-right text-2xl"></i>
			            </button>
			            
			            <!-- 指示器 -->
			            <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-20">
			                <button class="carousel-indicator active" data-index="0"></button>
			                <button class="carousel-indicator" data-index="1"></button>
			                <button class="carousel-indicator" data-index="2"></button>
			                <button class="carousel-indicator" data-index="3"></button>
			            </div>
			            
			            <!-- 播放/暂停按钮 -->
			            <button class="absolute top-4 right-4 w-8 h-8 rounded-full bg-black/30 hover:bg-black/50 text-white flex items-center justify-center z-20 transition-all duration-300" id="playPauseBtn">
			                <i class="fa fa-pause"></i>
			            </button>
			        </div> 
			    </div>

            <div>
			<div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>用户统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">1234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>成员统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">2234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>赛事统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>专业统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins">1234</h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/department/findDept.html" data-title="院校查询" data-icon="fa fa-university">
                                                <i class="fa fa-university"></i>
                                                <cite>院校贡献指数查询</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/department/findMajor.html" data-title="专业查询" data-icon="fa ffa-group">
                                                <i class="fa fa-group"></i>
                                                <cite>项目/论坛内容查询</cite>
                                            </a>
                                        </div>

                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="https://docs.daocloud.io/blogs/2025/open-source-report/" layuimini-content-href="page/member/findMember.html" data-title="成员查询" data-icon="fa fa-user-plus">
                                                <i class="fa fa-user-plus"></i>
                                                <cite>中国开源git项目报告</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/statis/statisMember.html" data-title="成员统计" data-icon="fa fa-pie-chart">
                                                <i class="fa fa-pie-chart"></i>
                                                <cite>项目成员统计</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/competition/findCompet.html" data-title="赛事查询" data-icon="fa fa-trophy">
                                                <i class="fa fa-trophy"></i>
                                                <cite>赛事查询</cite>
                                            </a>
                                        </div>


                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/openclass/findClass.html" data-title="公开课查询" data-icon="fa fa-snowflake-o">
                                                <i class="fa fa-snowflake-o"></i>
                                                <cite>开源项目查询</cite>
                                            </a>
                                        </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>		
                </div>
            </div>
			
			
	<div class="layui-col-md4">
				
				        <div class="layui-card">
				            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
				            <div class="layui-card-body layui-text">
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">2024大学生计算机设计大赛圆满结束</div>
				                    <div class="layuimini-notice-extra">2025-09-11 23:06</div>
				
				                </div>
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">中北大学获得2025全国大学生创新创业大赛国家级一等奖</div>
				                    <div class="layuimini-notice-extra">2025-08-29 12:57</div>
				                </div>
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">数据库设计大赛即将开始</div>
				                    <div class="layuimini-notice-extra">2025-08-15 14:28</div>
				                </div>
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">创新网页比赛即将开始</div>
				                    <div class="layuimini-notice-extra">2025-08-07 11:02</div>
				
				                </div>
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">科研信息交流平台活跃人数创新高</div>
				                    <div class="layuimini-notice-extra">2025-06-17 11:55</div>
				
				                </div>
				                <div class="layuimini-notice">
				                    <div class="layuimini-notice-title">中北大学近年来顺应空天领域科技发展新趋势</div>
				                    <div class="layuimini-notice-extra">2025-06-13 14:53</div>
				                </div>
				            </div>
				        </div>

			        <div class="layui-card">
			            <div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
			            <div class="layui-card-body layui-text">
			                <table class="layui-table">
			                    <colgroup>
			                        <col width="100">
			                        <col>
			                    </colgroup>
			                    <tbody>
			                    <tr>
			                        <td>项目名称</td>
			                        <td>
			                           科研信息交流平台管理员系统
			                        </td>
			                    </tr>
			                    <tr>
			                        <td>当前版本</td>
			                        <td>v2.1.6</td>
			                    </tr>
			                    <tr>
			                        <td>主要特色</td>
			                        <td>响应式 / 清爽 / 极简 /支持移动端</td>
			                    </tr>
			                    <tr>
			                        <td>开发者</td>
			                        <td>
			                            李宗熹
			                        </td>
			                    </tr>
			
			                    </tbody>
			                </table>
			            </div>
			        </div>
			
			    </div>
			</div>
			
			</div>

            
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content:html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'https://gitee.com/zhongshaofa/layuimini',
                        target: '_blank'
                    });
                }
            });
        });

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
 
         var optionRecords = {
             title : {
                 text: '根据项目/论文申报类型人数人数制作饼图',
                 x:'center'
             },
             tooltip : {
                 trigger: 'item',
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
             },
             legend: {
                 orient: 'vertical',
                 left: 'left',
                 data: ['计算机科学类','化学化工类','电器及自动化类','人文社科类','其他']
             },
             series : [
                 {
                     name: '项目来源',
                     type: 'pie',
                     radius : '55%',
                     center: ['50%', '60%'],
                     data:[
                         {value:30, name:'计算机科学类'},
                         {value:20, name:'化学化工类'},
                         {value:30, name:'电子信息类'},
                         {value:5, name:'人文社科类（社会调查类研究）'},
                         {value:15, name:'其他'}
                     ],
                     itemStyle: {
                         emphasis: {
                             shadowBlur: 10,
                             shadowOffsetX: 0,
                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                         }
                     }
                 }
             ]
         };
         echartsRecords.setOption(optionRecords);
 
         // echarts 窗口缩放自适应
         window.onresize = function(){
             echartsRecords.resize();
         }
 
     });
	
	
	const carouselItems = document.querySelectorAll('.carousel-item');
	        const indicators = document.querySelectorAll('.carousel-indicator');
	        const prevBtn = document.getElementById('prevBtn');
	        const nextBtn = document.getElementById('nextBtn');
	        const playPauseBtn = document.getElementById('playPauseBtn');
	        
	        // 轮播图状态
	        let currentIndex = 0;
	        let isPlaying = true;
	        let interval;
	        
	        // 初始化轮播
	        function initCarousel() {
	            startAutoPlay();
	            
	            // 事件监听
	            prevBtn.addEventListener('click', showPrevSlide);
	            nextBtn.addEventListener('click', showNextSlide);
	            playPauseBtn.addEventListener('click', togglePlayPause);
	            
	            indicators.forEach(indicator => {
	                indicator.addEventListener('click', () => {
	                    goToSlide(parseInt(indicator.dataset.index));
	                });
	            });
	            
	            // 鼠标悬停时暂停，离开时继续
	            document.querySelector('.carousel-container').addEventListener('mouseenter', () => {
	                if (isPlaying) {
	                    pauseAutoPlay();
	                }
	            });
	            
	            document.querySelector('.carousel-container').addEventListener('mouseleave', () => {
	                if (isPlaying) {
	                    startAutoPlay();
	                }
	            });
	        }
	        
	        // 显示指定索引的幻灯片
	        function goToSlide(index) {
	            // 隐藏当前幻灯片
	            carouselItems[currentIndex].classList.remove('active');
	            indicators[currentIndex].classList.remove('active');
	            
	            // 更新当前索引
	            currentIndex = (index + carouselItems.length) % carouselItems.length;
	            
	            // 显示新幻灯片
	            carouselItems[currentIndex].classList.add('active');
	            indicators[currentIndex].classList.add('active');
	            
	            // 激活动画元素
	            const activeItem = carouselItems[currentIndex];
	            const animatedElements = activeItem.querySelectorAll('h2, p, button');
	            
	            animatedElements.forEach(el => {
	                el.classList.remove('translate-y-4', 'opacity-0');
	                el.classList.add('translate-y-0', 'opacity-100');
	            });
	        }
	        
	        // 显示上一张幻灯片
	        function showPrevSlide() {
	            goToSlide(currentIndex - 1);
	        }
	        
	        // 显示下一张幻灯片
	        function showNextSlide() {
	            goToSlide(currentIndex + 1);
	        }
	        
	        // 开始自动播放
	        function startAutoPlay() {
	            interval = setInterval(showNextSlide, 5000); // 每5秒切换一次
	        }
	        
	        // 暂停自动播放
	        function pauseAutoPlay() {
	            clearInterval(interval);
	        }
	        
	        // 切换播放/暂停状态
	        function togglePlayPause() {
	            isPlaying = !isPlaying;
	            
	            if (isPlaying) {
	                startAutoPlay();
	                playPauseBtn.innerHTML = '<i class="fa fa-pause"></i>';
	            } else {
	                pauseAutoPlay();
	                playPauseBtn.innerHTML = '<i class="fa fa-play"></i>';
	            }
	        }
	        
	        // 键盘控制
	        document.addEventListener('keydown', (e) => {
	            if (e.key === 'ArrowLeft') {
	                showPrevSlide();
	            } else if (e.key === 'ArrowRight') {
	                showNextSlide();
	            } else if (e.key === ' ') {
	                e.preventDefault();
	                togglePlayPause();
	            }
	        });
	        
	        // 初始化轮播图
	        window.addEventListener('DOMContentLoaded', initCarousel);
</script>



<!-- 数据统计区域 -->
		<div class="layui-row research-stats">
		    <div class="layui-col-xs6 layui-col-sm3">
		        <div class="stats-card">
		            <div class="stats-icon"><i class="fa fa-tasks"></i></div>
		            <div class="stats-title">科研项目总数</div>
		            <div class="stats-value">128</div>
		            <div class="stats-growth"><i class="fa fa-arrow-up"></i> 较上月增长 12%</div>
		        </div>
		    </div>
		    <div class="layui-col-xs6 layui-col-sm3">
		        <div class="stats-card">
		            <div class="stats-icon"><i class="fa fa-file-text"></i></div>
		            <div class="stats-title">学术论文数量</div>
		            <div class="stats-value">564</div>
		            <div class="stats-growth"><i class="fa fa-arrow-up"></i> 较上月增长 8%</div>
		        </div>
		    </div>
		    <div class="layui-col-xs6 layui-col-sm3">
		        <div class="stats-card">
		            <div class="stats-icon"><i class="fa fa-certificate"></i></div>
		            <div class="stats-title">专利成果</div>
		            <div class="stats-value">89</div>
		            <div class="stats-growth"><i class="fa fa-arrow-up"></i> 较上月增长 5%</div>
		        </div>
		    </div>
		    <div class="layui-col-xs6 layui-col-sm3">
		        <div class="stats-card">
		            <div class="stats-icon"><i class="fa fa-users"></i></div>
		            <div class="stats-title">活跃用户</div>
		            <div class="stats-value">1,243</div>
		            <div class="stats-growth"><i class="fa fa-arrow-up"></i> 较上月增长 15%</div>
		        </div>
		    </div>
		</div>
		
		<!-- 图表展示区域 -->
		<div class="layui-row">
		    <div class="layui-col-md6">
		        <div class="chart-container">
		            <div class="chart-title">
		                <span>科研项目状态分布</span>
		                <span class="chart-filter">时间: 
		                    <select id="projectTimeFilter">
		                        <option value="month">本月</option>
		                        <option value="quarter">本季度</option>
		                        <option value="year" selected>本年度</option>
		                    </select>
		                </span>
		            </div>
		            <div class="chart-content" id="projectStatusChart"></div>
		        </div>
		    </div>
		    <div class="layui-col-md6">
		        <div class="chart-container">
		            <div class="chart-title">
		                <span>论文发表趋势</span>
		                <span class="chart-filter">时间: 
		                    <select id="paperTimeFilter">
		                        <option value="halfYear">近半年</option>
		                        <option value="year" selected>近一年</option>
		                        <option value="twoYear">近两年</option>
		                    </select>
		                </span>
		            </div>
		            <div class="chart-content" id="paperTrendChart"></div>
		        </div>
		    </div>
		</div>
		
		<div class="layui-row">
		    <div class="layui-col-md6">
		        <div class="chart-container">
		            <div class="chart-title">
		                <span>学科研究热度分析</span>
		                <span class="chart-filter">指标: 
		                    <select id="subjectMetricFilter">
		                        <option value="paperCount" selected>论文数量</option>
		                        <option value="projectCount">项目数量</option>
		                        <option value="citationCount">引用次数</option>
		                    </select>
		                </span>
		            </div>
		            <div class="chart-content" id="subjectRadarChart"></div>
		        </div>
		    </div>
		    <div class="layui-col-md6">
		        <div class="chart-container">
		            <div class="chart-title">
		                <span>学术资源类型分布</span>
		                <span class="chart-filter">范围: 
		                    <select id="resourceScopeFilter">
		                        <option value="all" selected>全部</option>
		                        <option value="internal">内部资源</option>
		                        <option value="external">外部资源</option>
		                    </select>
		                </span>
		            </div>
		            <div class="chart-content" id="resourceTypeChart"></div>
		        </div>
		    </div>
		</div>
		
		<div class="layui-row">
		    <div class="layui-col-md12">
		        <div class="chart-container">
		            <div class="chart-title">
		                <span>用户活跃时段分布</span>
		                <span class="chart-filter">日期: 
		                    <select id="userActiveDateFilter">
		                        <option value="today">今天</option>
		                        <option value="yesterday">昨天</option>
		                        <option value="week" selected>近一周</option>
		                        <option value="month">近一月</option>
		                    </select>
		                </span>
		            </div>
		            <div class="chart-content" id="userActiveChart"></div>
		        </div>
		    </div>
		</div>
		<script>
		// 使用DOM加载完成后的回调
		document.addEventListener('DOMContentLoaded', function() {
		    // 初始化图表
		    initCharts();
		    
		    // 图表初始化函数
		    function initCharts() {
		        // 项目状态分布饼图
		        var projectStatusChart = echarts.init(document.getElementById('projectStatusChart'));
		        var projectStatusOption = {
		            tooltip: {
		                trigger: 'item',
		                formatter: '{a} <br/>{b}: {c} ({d}%)'
		            },
		            legend: {
		                orient: 'vertical',
		                right: 10,
		                top: 'center',
		                data: ['进行中', '已完成', '待审核', '已延期', '已终止']
		            },
		            color: ['#1E9FFF', '#5FB878', '#FFB980', '#F2637B', '#9BC8E3'],
		            series: [{
		                name: '项目状态',
		                type: 'pie',
		                radius: ['50%', '70%'],
		                avoidLabelOverlap: false,
		                label: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    label: {
		                        show: true,
		                        fontSize: '18',
		                        fontWeight: 'bold'
		                    }
		                },
		                labelLine: {
		                    show: false
		                },
		                data: [
		                    {value: 68, name: '进行中'},
		                    {value: 35, name: '已完成'},
		                    {value: 15, name: '待审核'},
		                    {value: 7, name: '已延期'},
		                    {value: 3, name: '已终止'}
		                ]
		            }]
		        };
		        projectStatusChart.setOption(projectStatusOption);
		        
		        // 论文发表趋势折线图
		        var paperTrendChart = echarts.init(document.getElementById('paperTrendChart'));
		        var paperTrendOption = {
		            tooltip: {
		                trigger: 'axis'
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '3%',
		                containLabel: true
		            },
		            xAxis: {
		                type: 'category',
		                boundaryGap: false,
		                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		            },
		            yAxis: {
		                type: 'value'
		            },
		            color: ['#1E9FFF'],
		            series: [{
		                name: '发表数量',
		                type: 'line',
		                stack: '总量',
		                data: [32, 28, 41, 34, 39, 46, 55, 58, 62, 60, 54, 48],
		                smooth: true,
		                areaStyle: {
		                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                        offset: 0,
		                        color: 'rgba(30, 159, 255, 0.5)'
		                    }, {
		                        offset: 1,
		                        color: 'rgba(30, 159, 255, 0.1)'
		                    }])
		                },
		                markPoint: {
		                    data: [
		                        {type: 'max', name: '最高值'},
		                        {type: 'min', name: '最低值'}
		                    ]
		                }
		            }]
		        };
		        paperTrendChart.setOption(paperTrendOption);
		        
		        // 学科研究热度雷达图
		        var subjectRadarChart = echarts.init(document.getElementById('subjectRadarChart'));
		        var subjectRadarOption = {
		            tooltip: {
		                trigger: 'item'
		            },
		            radar: {
		                indicator: [
		                    {name: '人工智能', max: 100},
		                    {name: '生物医学', max: 100},
		                    {name: '材料科学', max: 100},
		                    {name: '环境工程', max: 100},
		                    {name: '量子计算', max: 100},
		                    {name: '数据科学', max: 100}
		                ],
		                radius: 65,
		                splitNumber: 4
		            },
		            color: ['#1E9FFF'],
		            series: [{
		                type: 'radar',
		                data: [{
		                    value: [92, 78, 85, 70, 65, 88],
		                    name: '研究热度',
		                    areaStyle: {
		                        color: 'rgba(30, 159, 255, 0.6)'
		                    }
		                }]
		            }]
		        };
		        subjectRadarChart.setOption(subjectRadarOption);
		        
		        // 资源类型分布环形图
		        var resourceTypeChart = echarts.init(document.getElementById('resourceTypeChart'));
		        var resourceTypeOption = {
		            tooltip: {
		                trigger: 'item',
		                formatter: '{a} <br/>{b}: {c} ({d}%)'
		            },
		            legend: {
		                orient: 'vertical',
		                right: 10,
		                top: 'center',
		                data: ['学术论文', '研究报告', '专利文档', '数据集', '软件工具', '其他']
		            },
		            color: ['#1E9FFF', '#5FB878', '#FFB980', '#F2637B', '#9BC8E3', '#7267CB'],
		            series: [{
		                name: '资源类型',
		                type: 'pie',
		                radius: ['40%', '70%'],
		                avoidLabelOverlap: false,
		                label: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    label: {
		                        show: true,
		                        fontSize: '18',
		                        fontWeight: 'bold'
		                    }
		                },
		                labelLine: {
		                    show: false
		                },
		                data: [
		                    {value: 1256, name: '学术论文'},
		                    {value: 432, name: '研究报告'},
		                    {value: 289, name: '专利文档'},
		                    {value: 167, name: '数据集'},
		                    {value: 98, name: '软件工具'},
		                    {value: 76, name: '其他'}
		                ]
		            }]
		        };
		        resourceTypeChart.setOption(resourceTypeOption);
		        
		        // 用户活跃时段分布柱状图
		        var userActiveChart = echarts.init(document.getElementById('userActiveChart'));
		        var userActiveOption = {
		            tooltip: {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'shadow'
		                }
		            },
		            grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '3%',
		                containLabel: true
		            },
		            xAxis: {
		                type: 'category',
		                data: ['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点', 
		                       '12-14点', '14-16点', '16-18点', '18-20点', '20-22点', '22-24点']
		            },
		            yAxis: {
		                type: 'value'
		            },
		            color: ['#1E9FFF'],
		            series: [{
		                name: '活跃用户数',
		                type: 'bar',
		                barWidth: '60%',
		                data: [45, 32, 18, 86, 248, 367, 312, 285, 324, 418, 356, 187]
		            }]
		        };
		        userActiveChart.setOption(userActiveOption);
		        
		        // 窗口调整时重置图表大小
		        window.addEventListener('resize', function() {
		            projectStatusChart.resize();
		            paperTrendChart.resize();
		            subjectRadarChart.resize();
		            resourceTypeChart.resize();
		            userActiveChart.resize();
		        });
		        
		        // 添加筛选器事件监听
		        $('#projectTimeFilter, #paperTimeFilter, #subjectMetricFilter, #resourceScopeFilter, #userActiveDateFilter').change(function() {
		            layer.msg('数据筛选更新中...', {icon: 16, time: 1000});
		            // 这里实际应用中应该根据筛选条件重新请求数据并更新图表
		            // 此处仅做演示，不实际更新数据
		            setTimeout(function() {
		                layer.msg('数据已更新', {icon: 1, time: 1000});
		            }, 1000);
		        });
		    }
		});
		</script>
	</body>
</html>